<div class="m-2">
    <table class="table table-sm table-bordered table-striped">
      <tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
      <tbody class="text-white">
        <tr *ngFor="let item of getProducts(); let i = index"
            [pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'"
            [pa-product]="item" (pa-category)="newProduct.category=$event">
          <td>{{i + 1}}</td>
          <td>{{item.name}}</td>
          <td [pa-attr]="item.category == 'Soccer' ? 'bg-info' : null">
            {{item.category}}
          </td>
          <td [pa-attr]="'bg-info'">{{item.price}}</td>
        </tr>
      </tbody>
    </table>
</div>
  